
var can_cen = document.getElementById('can_cen');
var html = document.querySelector("html");
var can_box = document.getElementById('can_cen_box'); 
var mask = document.getElementById('ball_mask');
var g123 = document.getElementById('g123')
var g2 = document.getElementById('g2')
var x = 0;
var y = 0;
var z = getRem(263);
var j = getRem(148);
g123.width= z;
g123.height = j;
function getRem(remA){
    return html.offsetWidth / 640 * remA;
}
function getImg(img){
        jq('#g123').get(0).getContext('2d').drawImage(img,x*900/html.offsetWidth,y*675/getRem(478),z*900/html.offsetWidth,j*675/getRem(478),0,0,z,j);
    
}
var img = new Image()
img.src="images/t01a83f62d3f4f8ba0e.jpg";
g2.src = "images/t01a83f62d3f4f8ba0e.jpg";
getImg(img);
var cxw_flag = true;
jq('#g123').on('touchstart',function(ev){
    
    if(cxw_flag){
        var e = ev.originalEvent.changedTouches[0];
        var startX = e.clientX;
        var startY = e.clientY;
    }
    jq(document).on('touchmove.aa',function(ev){
        
        var e = ev.originalEvent.changedTouches[0];
        x = e.clientX - jq('#g123').get(0).offsetWidth/2;
        y = e.clientY - jq('#g123').get(0).offsetHeight/2 - can_box.offsetTop;
        var pX = jq('#can_cen_box').width()-jq('#g123').get(0).offsetWidth;
            if(x>=pX){
                x=pX;
            }else if(x<=0){
                x = 0;
            }
        var pY = jq('#can_cen_box').height()-jq('#g123').get(0).offsetHeight;
            if(y>=pY){
                y=pY;
            }else if(y<=0){
                y = 0;
            }
        jq('#g123').css({left:x+'px',top:y+'px'});
        getImg(img);
        cxw_flag = false;
    })
    jq(document).on('touchend.aa',function(){
        jq(this).off(".aa");
        cxw_flag = true;
    })
})
jq('#can_btn1').on('touchstart',function(){
    g2.src = g123.toDataURL();
    jq(this).css({background:'#0CC440',color:'white',opacity:'0.5'});
    jq(this).on('touchend',function(){
        jq(this).css({background:'#fff',color:'#0CC440',opacity:'1'});
    })
})
jq('#can_btn2').on('touchstart',function(){
    jq(this).css({background:'#0CC440',color:'white',opacity:'0.5'});
    jq('#can_btn2').on('touchend',function(){
        g2.src = '';
        jq(this).css({background:'#fff',color:'#0CC440',opacity:'1'});
        jq('#can_btn1').css({background:'#fff',color:'#0CC440',opacity:'1'});
    })
})
